<template>
    <div class="app-container"
         id="mmv-page"
         v-loading="loading">
        <mmv-title :title="`车型：${modelInfo}`"></mmv-title>
        <el-form v-if="true"
                 label-width="130px"
                 inline
                 size="mini">
            <el-form-item label="周内(1-4)"
                          prop="weeksPrice">
                <el-input-number :min="0"
                                 style="width:200px"
                                 controls-position="right"
                                 size="mini"
                                 v-model="weeksPrice"></el-input-number>
            </el-form-item>
            <el-form-item label="周末(5-7)"
                          prop="weekendPrice">
                <el-input-number :min="0"
                                 style="width:200px"
                                 controls-position="right"
                                 size="mini"
                                 v-model="weekendPrice">
                </el-input-number>
            </el-form-item>
            <br>
            <el-form-item label="车辆押金"
                          prop="deposit">
                <el-input-number :min="0"
                                 style="width:200px"
                                 controls-position="right"
                                 size="mini"
                                 v-model="deposit">
                </el-input-number>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import * as planApi from "@/api/plan/plan";
import map from 'lodash/map';
import forEach from 'lodash/forEach';
import MmvTable from './components/mmv-table.vue'
// import _ from "lodash"
import MmvUploadImage from '../components/mmv-upload-image.vue'
import * as Utils from '@/utils'

export default {
    components: {
        MmvTitle,
        MmvTable,
        MmvUploadImage,
    },
    dicts: [
        'car_model_list_classification',
        'car_model_luxury_classification',
        'car_model_label',
        'operating_classification',
        'business_classification',
        'car_model_config_list'
    ],
    props: {
        planId: String,
        form: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            deposit: 0,
            weeksPrice: 0, // 周内价格
            weekendPrice: 0, // 周末价格
            //
            nowPrice: 0,
            nowEdit: null,
            loading: false,
            showchexing: false,
            planName: '', // 车价名称
            //
            configurationId: '', // 品牌车系车型
            modelId: '',
            modelName: '',
            modelInfo: '',
            upcoverImage: '',
            detailsImage: [],
            modelConfig: [],
            //
            label: [],
            operatingClassification: '',
            //
            isSetMeal: 2, // 是否需要套餐车价
            // 是否显示弹出层
            open: false,
            openkehu: false, // 客户选择弹窗
            value: new Date(),
            list: [{
                mondayPrice: 0,
                tuesdayPrice: 0,
                wednesdayPrice: 0,
                thursdayPrice: 0,
                fridayPrice: 0,
                saturdayPrice: 0,
                sundayPrice: 0,
            }],
            // holiday_checked: [],
            checktable: [{}],
            checktableindex: 0,
            checklistteshutable: [{}],
            checklistteshutableindex: 0,
            radio: 0,
            mealList: [], // 套餐
            chargeItemsList: [], // 收费项
            configurationList: [], // 车型业务配置列表
            configurationquery: {
                pageNum: 1,
                pageSize: 10,
                modelName: null,
                configurationId: null
            },
            // 节假日
            holidayList: [], // 节假日列表
            holidayIds: [], // 选中的节假日id
            // 特殊日
            specialDayList: [], // 特殊日列表
        }
    },
    computed: {
        isEdit() {
            return !!this.form.planId;
        },
        rilijiage() {
            return {
                0: this.list[0].sundayPrice,
                1: this.list[0].mondayPrice,
                2: this.list[0].tuesdayPrice,
                3: this.list[0].wednesdayPrice,
                4: this.list[0].thursdayPrice,
                5: this.list[0].fridayPrice,
                6: this.list[0].saturdayPrice,
            }
        },
        /** 当前选中的节假日 */
        holiday_checked() {
            return this.holidayList.filter(val => this.holidayIds.indexOf(val.holidayId) >= 0)
        },
        checkboxlistdatepicker() {
            return this.holiday_checked.map(val => val.datepicker);
        },
        // 节假日/特殊日期费用费用(无值时传空集合)
        planHolidayBillingList() {
            const arr = [...this.holiday_checked, ...this.specialDayList];
            return map(arr, val => {
                return {
                    holidayId: val.holidayId, // 日期费用id(holidayType==1 必填)
                    holidayType: val.holidayId ? 1 : 2, // 费用类型（1节假日2特殊日期）
                    holidayName: val.label, // 日期名称
                    startTime: val.datepicker[0], // 开始时间（年月日）
                    endTime: val.datepicker[1], // 结束时间（年月日）
                    price: val.value || 0, // 费用
                }
            });
        },
        // 套餐信息
        planMealBillingList() {
            return map(this.mealList, val => {
                return {
                    mealId: val.mealId, // 套餐id
                    mealName: val.label, // 套餐名称
                    discount: val.value / 100 || 1,// 折扣取值0-1之间
                }
            });
        },
        // 费用项
        chargeItemsBillingList() {
            return map(this.chargeItemsList, val => {
                return {
                    chargeItemsName: val.chargeItemsName, // 收费项名称
                    uniquenessCode: val.uniquenessCode, // 收费项唯一编码
                    price: val.price || 0, // 费用
                }
            });
        },
        submitFormData() {
            return {
                planId: this.planId, // 车价ID
                weeksPrice: this.weeksPrice,
                weekendPrice: this.weekendPrice,
                deposit: this.deposit, // 节假日/特殊日期费用费用(无值时传空集合)
            }
        },
    },
    watch: {
        checkboxlistdatepicker: {
            handler(val) {
                this.checktableindex += 1;
            },
            deep: true
        },
        weeksPrice(val) {
            this.list[0].mondayPrice = val;
            this.list[0].tuesdayPrice = val;
            this.list[0].wednesdayPrice = val;
            this.list[0].thursdayPrice = val;
        },
        weekendPrice(val) {
            this.list[0].fridayPrice = val;
            this.list[0].saturdayPrice = val;
            this.list[0].sundayPrice = val;
        },
    },
    async mounted() {
        if (this.planId) {
            console.log('走修改流程');
            await this.getData();
        }
    },
    methods: {
        //
        isShowEdit(data, date) {
            return data.isSelected && this.nowEdit == date.getTime();
        },
        changeEdit(date) {
            this.nowPrice = this.superMmv(date, this.rilijiage[date.getDay()]);
            this.nowEdit = date.getTime();
        },
        okEdit(date) {
            this.nowEdit = null;
            if (!this.nowPrice) return;
            this.addTeshuri(this.nowPrice, date, date);
        },
        /** 新增特殊日 */
        addTeshuri(value = 0, start_time = new Date(), end_time = new Date()) {
            this.specialDayList.push({
                uuid: require('uuid').v4(),
                label: '特殊日',
                value: value,
                canEditLabel: true,
                canClose: true,
                datepicker: [start_time, end_time],
                key: String([start_time, end_time]),
            })
        },
        /** 移除特殊日 */
        onRemoveSpecialDay(item, index) {
            this.specialDayList.splice(index, 1);
        },
        /** 日历价格显示计算器 */
        superMmv(date, price) {
            // 计算出的价格
            let _price = price;
            function mmv(value) {
                const _date = new Date(value);
                return new Date(_date.getFullYear(), _date.getMonth() + 1, _date.getDate()).getTime();
            }
            // 日历当前格子时间戳
            const time = mmv(date);
            // 遍历节假日数组
            require('lodash/forEach')(this.holiday_checked, val => {
                const start_time = mmv(val.datepicker[0]);
                const end_time = mmv(val.datepicker[1]);
                if (time <= end_time && time >= start_time) {
                    _price = val.value;
                }
            });
            // 遍历特殊日数组
            require('lodash/forEach')(this.specialDayList, val => {
                let start_time = mmv(val.datepicker[0]);
                let end_time = mmv(val.datepicker[1]);
                if (time <= end_time && time >= start_time) {
                    _price = val.value;
                }
            });
            return _price;
        },
        submitForm() {
            console.log(this.submitFormData)
            return this.submitFormData;
        },
        async getData() {
            this.loading = true;
            await planApi.getNewInfo(this.planId).then(response => {
                this.weeksPrice = response.data.weeksPrice;
                this.weekendPrice = response.data.weekendPrice;
                this.modelInfo = response.data.modelInfo;
                this.deposit = response.data.deposit;
                // 还原节假日/特殊日价格
                forEach(response.data.holidayVoList, val => {
                    // 还原节假日
                    if (val.holidayType == 1) {
                        this.holidayIds.push(val.holidayId);
                    } else {
                        // 还原特殊日
                        this.specialDayList.push({
                            uuid: require('uuid').v4(),
                            label: val.holidayName,
                            value: val.price,
                            holidayId: val.holidayId,
                            canClose: true,
                            datepicker: [new Date(val.startTime), new Date(val.endTime)],
                        });
                    }
                });
                forEach(response.data.holidayVoList, val => {
                    const item = this.holiday_checked.find(_val => _val.holidayId == val.holidayId);
                    if (item) {
                        item.label = val.holidayName;
                        item.value = val.price;
                        item.datepicker = [new Date(val.startTime), new Date(val.endTime)];
                    }
                });
                this.loading = false;
            });
        },
        /** */
    },
}
</script>

<style lang="scss" scoped>
#mmv-page {
    ::v-deep .el-calendar-table .el-calendar-day {
        height: 60px;
    }
}
.rili {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    // > div:nth-child(1){
    //   // margin-bottom: 5px;
    // }
}
</style>
